.site-overlay-info p{
    color:#ffffff;
    margin: 10px 10px 0 10px;
}
/* 取消默认页面的阴影部分 */
.type-about .layout #page {
    box-shadow: none !important;
    padding: 0 !important;
}
/* .type-about .layout #page .page-title {
    display: none !important;
} */

.author-box {
    text-align: center;
    padding: 20px;
    padding-top: 3px;
    height: auto;
    border-bottom: 2px solid #ddd;
    /* 分割线 */
}

.content ul{
    list-style: none;
}

#hitokoto, #poem {
    font-size: 16px;
}

/* 文本格式，全局 */
.content h2 {
    margin-top: 0;
    margin-bottom: 0;
}

/* 设置每一节宽度，高度，长度等等 */
.content .column {
    margin-top: 4px;
    margin-bottom: 4px;
    width: 65%;
    margin-left: 20px;
}

/* 给第一格个人信息进行适配 */
.content .info-columns {
    margin: 10px 0;
}

/* 第一格的个人信息，我使用了表格，为了显示更多信息的同时不空出大部分地方，你们自行选择 */
.content .row {
    display: flex;
    justify-content: space-between;
}

/* 每一节通用格式 */
.section {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    margin-top: 20px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    height: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 夜间适配，改变背景和相关阴影部分 */
[data-theme=dark] .section {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .section_bing {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
[data-theme=dark] .section_jn {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}


/* 右图左文样式，左边为row，因为是默认的所以不需要指定 */
.section.right {
    flex-direction: row-reverse;
}

/* 节内图片所在位置相关格式，这里是因为我开了fancybox，也就是点击预览大图的效果，使图片被一个a所包裹，如果你关了请自行将该内容添加到下面的img中，其他位置对应调整 */
.section a {
    width: 45%;
    height: 100%;
    transition: transform 0.5s ease; /* 添加过渡效果 */
}

/* 节内A标签内的图片，占满a标签，并不拉伸，使用覆盖，自适应大小 */
.section img {
    width: 60%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 在鼠标悬停在 .section 上时，放大图片 */
.section:hover a {
    transform: scale(1.10); /* 将图片放大10% */
}

/* 设置放大只在当图片没有消失时，否则这个宽度会覆盖掉设置的小时候为100%的设定 */
@media (min-width: 870px) {
    /* 图像在右边的节，当鼠标放入，适当向左偏移，造成好像被图像挤过去的视觉效果 */
    .section.right:hover .content {
        margin-left: 10px;
    }
    /* 通用，因为文字是靠左的，改变宽度就被挤过去了 */
    .section:hover .content {
        width: 50%;
        width: 50%;
    }
}

/* 通用文字部分基础设置 */
.section .content {
    width: 55%;
    margin: 20px 20px;
    max-height: 100%;
    overflow: hidden; /* 超出部分不好看，我给隐藏了，看不见也比超出强，不过这个可以通过修改各种宽度高度进行个性适配 */
    text-overflow: ellipsis;
    transition: width 0.5s ease, margin-left 0.3s ease; /* 添加过渡效果 */
}

/* 最下方的一堆个人站点 */
.wrapper {
    text-align: center; /* 文字居中 */
    padding: 10px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 四个大字 */
.wrapper .label {
    margin: 20px 20px;
}

/* 网格相关链接布局样式 */
.wrapper .site-grid {
    margin-top: 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 一行三块 */
    gap: 10px; /* 块之间的间隙 */
    width: 100%;
    height: auto; /* 宽度自动填充 */
}

/* 每个站点块的样式 */
.wrapper .site-grid .site-item {
    z-index: 1;
    border-radius: 10px;
    position: relative;
    width: 100%; /* 宽度自动填充 */
    height: 200px; /* 设置块的高度 */
    background-size: cover; /* 背景图片填充整个块 */
    background-position: center; /* 背景图片居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden; /* 使超出边框的内容隐藏 */
    transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
}

/* 动画效果，鼠标放上去时背景图片放大的动画 */
@media (min-width: 870px) {
    .wrapper .site-grid .site-item:hover {
        transform: scale(1.2); /* 放大倍数 */
        z-index: 2;
        font-size: 16px;
        transition: all 1.2s;
    }
}

/* 块中的字覆盖层样式 */
.wrapper .site-overlay {
    position: absolute;
    inset: 0; /* 将 top, right, bottom, left 都设为 0 */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5); /* 初始为透明背景 */
    transition: background 0.6s, color 0.6s; /* 背景过渡效果 */
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font: bold 25px sans-serif; /* 根据需求更改字体大小 */
    color: #000000; /* 根据需求更改字体颜色，默认是黑 */
}

/* 鼠标悬停时的样式 */
.wrapper .site-item:hover .site-overlay {
    background: rgba(0, 0, 0, 0.5); /* 白底变黑 */
    color: #ffffff; /* 黑字变白 */
}

/* 夜间适配 */
[data-theme=dark] .wrapper {
    background-color: #2c2c2c; /* 这是我全局的夜间统一色，你们自己看 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 夜间鼠标悬停动效适配 */
[data-theme=dark] .wrapper .site-item:hover .site-overlay {
    background: rgba(255, 255, 255, 0.5);
    color: #000000;
}

/* 夜间卡片背景适配，和白天是相反的 */
[data-theme=dark] .wrapper .site-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}

/* 窄屏适配 */
@media (max-width: 870px) { /* 当页面宽度小于870像素时 */
    /* 不显示图片 */
    .section a {
        display: none;
    }

    /* 将位置留给文字 */
    .section .content {
        width: 100%;
    }

    /* 高度自己调整，因为窄屏视野没有那么大，部分节窄一点宽一点不影响，但是最小仍然是之前设置的值，这个需要你们自己改 */
    .section {
        height: auto;
        min-height: 250px;
    }

    /* 下方链接到现在显示为两列，要不然挤得不行 */
    .wrapper .site-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 一行显示2个块 */
        grid-auto-rows: 200px;
        /* 保持行高一致 */
    }
}

/* 当页面宽度小于480像素时，我们的表格成为1列 */
@media (max-width: 560px) {
    .wrapper .site-grid {
        grid-template-columns: repeat(1, 1fr);
        /* 一行显示1个块 */
        grid-auto-rows: 200px;
        /* 保持行高一致 */
    }
}

@media (max-width: 768px) {
    .section img {
        display: none;
    }
}

.section_bing h2,.section_jn h2{
    text-align: center;
    margin: 0px auto;
}
.section_bing,.section_jn{
    padding: 10px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.zhe,.bing{
    width: 50%;
}
.chart-container{
    height: 170px;
}
@media (max-width: 768px) {
    .section_bing .content{
        width: 100%;
    }
    #pieChart canvas{
        left: 0px !important;
        top: 0px !important;
    }
    .section_bing .bing{
        left: 0 !important;
        top: 0 !important;
    }
    .section_bing .zhe{
        left: 0 !important;
        top: 0 !important;
    }
    .zhe,.bing{
        width: 100% !important;
    }
    .chart-container{
        height: 380px;
    }   
}

.section_bing .bing{
    position: relative;
    left: -40px;
    top: 20px;
}
.section_bing .zhe{
    position: relative;
    top: -150px;
    left: 430px;
}




/* 技能条 */
.skills {
    display: flex;
    flex-direction: row; /* 修改为行显示 */
    gap: 10px;
    flex-wrap: wrap; /* 允许换行 */
    margin-top: 30px;
    padding-bottom: 20px;
}

.skill {
    display: flex;
    align-items: center;
    width: 48%; /* 每个技能条占据一半宽度 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
    margin-top: 10px;
}
@media (max-width: 870px){
    .skill{
        width: 100%;
    }
}

.skill-bar {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 10px;
}

.skill-bar::before {
    content: attr(value) '%';
    position: absolute;
    left: 10px;
    color: rgb(160, 153, 153);
    font-weight: bold;
}

.skill-bar::after {
    content: attr(skill);
    position: absolute;
    right: 10px;
    color: white;
    font-weight: bold;
}

.skill-bar[skill="HTML"]::after {
    background-color: #e44d26;
}

.skill-bar[skill="linux"]::after {
    background-color: #834433;
}

.skill-bar[skill="网络"]::after {
    background-color: #73c0de;
}

.skill-bar[skill="云计算"]::after {
    background-color: #e44d26;
}

.skill-bar[skill="安全"]::after {
    background-color: #4b5474;
}

.skill-bar[skill="python"]::after {
    background-color: #217e97;
}

.skill-bar[skill="php"]::after {
    background-color: #832391;
}

.skill-bar::after {
    position: absolute;
    right: 0px;
    color: white;
    font-weight: bold;
    background-color: inherit;
    padding: 0 5px;
    border-radius: 10px;
    height: 100%;
}   

.skill-bar[skill="云计算"]::after {
    width: 80%;
}

.skill-bar[skill="linux"]::after {
    width: 85%;
}

.skill-bar[skill="网络"]::after {
    width: 75%;
}

.skill-bar[skill="安全"]::after {
    width: 65%;
}

.skill-bar[skill="python"]::after {
    width: 60%;
}

.skill-bar[skill="php"]::after {
    width: 60%;
}

